<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>菜单页面</title>
<link rel="stylesheet" type="text/css" href="../css/menu.css" />
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript">
			function initMenu(){
				//所有父菜单,采用通用的getElementsByClassName()
				var supMenus = getElementsByClassName("sup_menu",null,"h1");
				//所有子菜单
				var subMenus = getElementsByClassName("sub_menu",null,"ul");
				
				
				//设置除第一个子菜单外的其它子菜单为隐藏状态
				for(var i=0;i<subMenus.length;i++){
						if(i==0){
							continue;
						}else{
							subMenus[i].style.display="none";	
						}
				}
				
				//为每一个sup_menu注册事件
				for(var i=0;i<supMenus.length;i++){
					supMenus[i].onclick=function(){
						//隐藏所有
						for(var j=0;j<subMenus.length;j++){
							subMenus[j].style.display="none";
						}
						//让选中的子菜单显示出来
						var idx = index(this,supMenus);
						subMenus[idx].style.display="";
					}	
				}
			}
			
			function index(obj,arr){
				for(var i=0;i<arr.length;i++){
					if(	obj==arr[i]){
						return i;	
					}
				}
				return -1;
			}			
		</script>

</head>
<body onLoad="initMenu()">
	<ul id="menu">

		<li>
			<h1 class="sup_menu">
				<a herf="#">车辆管理</a>
			</h1>
			<ul class="sub_menu">
				<li><a href="" target="main">添加车辆</a></li>
				<li><a href=""
					target="main">车辆列表</a></li>
			</ul>
		</li>


		<li>
			<h1 class="sup_menu">
				<a herf="#">部门管理</a>
			</h1>
			<ul class="sub_menu">
				<li><a href="" target="main">添加部门</a></li>
				<li><a href=""
					target="main">部门列表</a></li>
			</ul>
		</li>



		<li>
			<h1 class="sup_menu">
				<a herf="#">人员管理</a>
			</h1>
			<ul class="sub_menu">
				<li><a href="" target="main">添加人员</a></li>
				<li><a href=""
					target="main">人员列表</a></li>
			</ul>
		</li>

		

		<li>
			<h1 class="sup_menu">
				<a herf="#">行车记录查看</a>
			</h1>
			<ul class="sub_menu">

				<li><a href="" target="main">**</a></li>
			</ul>
		</li>
		<li>
			<h1 class="sup_menu">
				<a herf="#">权限管理</a>
			</h1>
			<ul class="sub_menu">
				<li><a href="" target="main">***</a></li>
				<li><a href="" target="main">***</a></li>
			</ul>
		</li>

		<li>
			<h1 class="sup_menu">
				<a herf="#">报警管理</a>
			</h1>
			<ul class="sub_menu">
				<li><a href="" target="main">添加报警类型</a></li>
				<li><a href="**"
					target="main">报警类型列表</a></li>
			</ul>
		</li>
		<li>
			<h1 class="sup_menu">
				<a herf="#">管理员管理</a>
			</h1>
			<ul class="sub_menu">
				<li><a href="" target="main">添加管理员</a></li>
				<li><a href="" target="main">管理员列表</a></li>
			</ul>
		</li>
	</ul>
</body>

</html>